<template>
	<view class="w-flex-col page">
		<ad unit-id="adunit-0e3b5bf0e59fd6fa" ad-type="video" ad-theme="white" bindload="adLoad" binderror="adError"
			bindclose="adClose">
		</ad>
		<view class="w-flex-row section">
			<image class="w-shrink-0 w-self-center image_2"
				:src="info.logo" />
			<view class="w-ml-10 w-flex-col w-flex-1 w-self-start group ml-11">
				<text class="w-self-start font text">{{info.merchant_name}}</text>
				<text class="w-mt-8 w-self-stretch font_2 mgt55">地址: {{info.address}}</text>
			</view>
			<text class="w-ml-10 w-shrink-0 w-self-center font text_2">{{info.remark}}</text>
		</view>
		<view class="w-flex-row equal-division section_2 w-justify-around">
			<view class="w-flex-row w-items-center equal-division-item" @tap="callPhone">
				<image class="w-shrink-0 image_4" src="/static/merchant_info/fc8bfc38e4c67495956414dbd6fb811d.png" />
				<text class="w-ml-10 font ml-9">联系</text>
			</view>
			<view class="w-ml-28 w-flex-row w-items-center equal-division-item" @tap="goAddress">
				<image class="w-shrink-0 image_4" src="/static/merchant_info/f493642aba3dde6aa8a4064c5be0aabb.png" />
				<text class="font ml-9">导航</text>
			</view>
		
			<view class="w-ml-28 w-flex-row w-items-center equal-division-item">
				<button open-type="share" plain class="share-btn">
				<image class="w-shrink-0 image_4" src="/static/merchant_info/bbf95b2c5cd4e055bd069b2fe5a6b9f3.png" />
				<text class="font ml-11">分享</text>
				</button>
			</view>
			
			<view class="w-ml-28 w-flex-row w-items-center equal-division-item">
				<image class="w-shrink-0 image_4" src="/static/merchant_info/b0556d1e0db1ab0b2a36fc90cdf5e749.png" />
				<text class="font ml-7">收藏</text>
			</view>
		</view>
		<view class="w-flex-col w-relative section_3" v-for="(item, index) in info.coupons">
			<view class="w-flex-row w-items-center w-self-stretch group_3">
				<view class="w-flex-row w-flex-1">
					<image class="w-shrink-0 image_5 mgt15"
						:src="item.img" />
					<view class="w-flex-col w-flex-1 ml-7 w-justify-around">
						<view class="w-flex-row w-items-center">
							<text class="w-ml-2 font_3 text_4">{{info.merchant_name}}</text>
						</view>
						<text class="w-mt-8 font text_8">{{item.name}}</text>
					</view>
				</view>
				<view class="w-ml-20 w-flex-col group_4">
					<view class="w-flex-row w-items-baseline w-self-stretch">
						<text class="font text_6">￥</text>
						<text class="font_3 text_5">{{item.price}}</text>
					</view>
					<text class="w-mt-18 w-self-start font_2 text_7 mgt55">剩余 {{item.number}} 张</text>
				</view>
			</view>
			<text class="w-self-start font text_9">{{item.get_number}} 人领取</text>
			<view class="w-flex-col w-justify-start w-items-center text-wrapper pos" @tap="applyCoupon(item)">
				<text class="font_2 text_10">立即领取</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				id:0,
				info:[]
			};
		},
		onLoad(e) {
			console.log(e)
			if (e.id) {
				this.id = e.id
			}
			this.getMerchantsInfo();
		},
		onShareAppMessage(res) {
			// console.log(this.shareGood)
			return {
				title: this.info.merchant_name + '发优惠券啦',
				path: '/subpackageA/merchant_info/merchant_info?id='+this.info.id,
				imageUrl: this.logo
			}
		},
		onShareTimeline(res) {
			return {
				title: this.info.merchant_name + '发优惠券啦',
				path: '/subpackageA/merchant_info/merchant_info?id='+this.info.id,
				imageUrl: this.logo
			}
		},
		methods: {
			goAddress(){
				// console.log(1)
				uni.chooseLocation({
					latitude:this.info.latitude,
					longitude:this.info.longitude,
					success: function (res) {
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				});

			},
			getMerchantsInfo(){
				this.$http.get('merchantInfo', {
					params:{
						id:this.id
					}
				} ).then(res => {
					console.log(res.data.data)
					this.info = res.data.data
				}).catch(err => {
				
				})
			},
			adLoad() {
				console.log('视频广告 广告加载成功')
			},
			adError(err) {
				console.error('视频广告 广告加载失败', err)
			},
			adClose() {
				console.log('视频广告 广告关闭')
			},
			callPhone() {
				uni.makePhoneCall({
					phoneNumber: '' //仅为示例
				});
			},
			applyCoupon(item) {
				uni.showLoading({
					title: '领取中'
				})
				
				this.$http.post('couponLogAdd', {
					
						coupon_id:item.id,
						merchant_name:this.info.merchant_name
					
				} ).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.data.msg
					})
					
					setTimeout(function() {
						
						uni.hideLoading()
						if (res.data.code) {
							uni.navigateTo({
								url:"/subpackageA/my/coupon"
							})
						}
					}, 1000)
					
				}).catch(err => {
				
				})

				
			}
		},
	};
</script>

<style scoped lang="scss">
	.share-btn{
		border: none;
		align-items: center;
		display: flex;
	}
	.mgt15 {
		margin-top: 15rpx;
	}

	.mgt55 {
		margin-top: 55rpx;
	}

	.ml-9 {
		margin-left: 18rpx;
	}

	.ml-11 {
		margin-left: 22rpx;
	}

	.ml-7 {
		margin-left: 14rpx;
	}

	.page {
		padding-bottom: 50rpx;
		background-color: #f4f4f4;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;

		.image {
			width: 100vw;
			height: 53.6vw;
		}

		.section {
			padding: 32rpx 28rpx;
			background-color: #ffffff;
			border-radius: 20rpx;

			.image_2 {
				width: 138rpx;
				height: 138rpx;
			}

			.group {
				margin-top: 16rpx;

				.text {
					line-height: 25.9rpx;
				}

				.group_2 {
					width: 286.64rpx;

					.image_3 {
						width: 40rpx;
						height: 40rpx;
					}

					.text_3 {
						width: 44rpx;
					}
				}
			}

			.text_2 {
				margin-right: 12rpx;
				line-height: 22.66rpx;
			}
		}

		.equal-division {

			.equal-division-item {
				padding: 12rpx 0;

				.image_4 {
					width: 48rpx;
					height: 48rpx;
				}
			}
		}

		.section_2 {
			padding: 16rpx 12rpx 16rpx 12rpx;
			background-color: #ffffff;
		}

		.font {
			font-size: 24rpx;
			font-family: SourceHanSansCN;
			line-height: 25.78rpx;
			color: #000000;
		}

		.section_3 {
			margin-top: 16rpx;
			padding: 0 10rpx 24rpx 24rpx;
			background-color: #ffffff;
			border-radius: 20rpx;

			.group_3 {
				padding: 24rpx 4rpx 32rpx;
				border-bottom: solid 2rpx #eeeeee;

				.image_5 {
					width: 120rpx;
					height: 120rpx;
				}

				.image_6 {
					width: 50rpx;
					height: 50rpx;
				}

				.font_3 {
					font-size: 28rpx;
					font-family: SourceHanSansCN;
				}

				.text_4 {
					color: #000000;
					line-height: 33.3rpx;
					margin-left: 12rpx;
				}

				.text_8 {
					margin-left: 12rpx;
					line-height: 25.98rpx;
				}

				.group_4 {
					width: 145rpx;
					height: 88rpx;

					.text_6 {
						color: #ff5733;
						line-height: 20.18rpx;
					}

					.text_5 {
						color: #ff5733;
						line-height: 27.32rpx;
					}

					.text_7 {
						color: #aaaaaa;
					}
				}
			}

			.text_9 {
				margin-left: 20rpx;
				margin-top: 32rpx;
				color: #a6a6a6;
				line-height: 34rpx;
				margin-top: 50rpx;
			}

			.text-wrapper {
				padding: 16rpx 0;
				background-color: #ff8d1a;
				border-radius: 30rpx;
				width: 158rpx;

				.text_10 {
					color: #ffffff;
					line-height: 22.32rpx;
				}
			}

			.pos {
				position: absolute;
				right: 16rpx;
				top: 230rpx;
			}
		}

		.font_2 {
			font-size: 24rpx;
			font-family: SourceHanSansCN;
			line-height: 28rpx;
			color: #000000;
		}
	}
</style>